<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <title>过滤器</title>
</head>

<body>
    <div id="main">
        class 样式与style
        <div v-bind:class="classSymbal"></div>
        <div :class="[class1,class2]"></div>
        <!--数组方式赋值-->
        <div class="class1 class2 class3"></div>
        <div :class="{style1:result}">class的赋值</div>
        <div :id="{style1:result}">id的赋值</div><!--id为啥不行啊-->
        <div :class="obj">class的赋值</div>
        <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex','box-flex'] }"></div><!----webkit-box,-ms-flexbox,flex 
            都要取决于浏览器是否支持，如果浏览器支持就显示为true，不支持就显示为false-->
    </div>

</body>
<script>

    new Vue({
        el: "#main",
        data: {
            classSymbal: 'demo demo2 demo3',//一个变量多个值
            class1: 'demo2',//数组方式 多个变量多个值
            class2: 'demo3',//数组方式 多个变量多个值
            result: true,
            result2: true,
            obj:{
                demo:true,
                demo2:true
            }

        },

    });

</script>

</html>